/**
 * @description 股票指令
 * @author wangjianjun
 */

import React, { PureComponent } from 'react';
import { FirstHeaderC, AvailableAssetC, TradeHoldC, NoDataMaskC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin } from 'antd';
import style from './index.less';
import StockInfor from './StockInfor';
import InstructionSend from './InstructionSend';
import { connect } from 'dva';
import 'moment/locale/zh-cn';

@Form.create()
@connect(({ stockOrderM, loading }) => ({ stockOrderM, loading }))
export default class StockOrder extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      exchangecode: null,
      portfolioId: null, // 组合编号
      tradingCode: null, // 证券代码
      isShow: false,
      query: {},
      position: {},
      portfolioCode: undefined, // 组合代码
    };
  }

  changeType = (msg) => {
    let val;
    if (msg) val = msg.key;
    this.setState({
      portfolioId: val, // 组合编号
    });
  };

  changeCode = (msg) => {
    if (msg) {
      this.setState({
        tradingCode: msg.tradingCode, // 证券代码
        exchangecode: msg.exchangeCode,
      });
    } else {
      this.setState({
        tradingCode: undefined, // 证券代码
        exchangecode: undefined,
      });
    }
  };

  showTable = (query) => {
    return <InstructionSend type='1' types='1' initValue={query} />;
  };

  // 获取组合code
  onChangePortfolioCode = (val) => {
    this.setState({
      portfolioCode: val, // 组合代码
    });
  };

  render() {
    const {
      stockOrderM: { flag },
      type,
    } = this.props;
    const { portfolioCode, portfolioId, timeStamp1, timeStamp2 } = this.state;
    return (
      <div className={style.back}>
        <Row>
          <Col span={6}>
            <div>
              <FirstHeaderC title='股票信息' />
            </div>
            <div className={style.bgcolor} style={{ position: 'relative' }}>
              <Spin spinning={this.props.loading.effects['stockOrderM/getStock1'] == true}>
                <StockInfor />
              </Spin>
              {flag && (
                <div style={{ margin: '40px 10px 10px 10px' }}>
                  <NoDataMaskC height='500px' width='300px' title={'请选择证券代码，加载数据！'} />
                </div>
              )}
            </div>
          </Col>
          <Col span={18}>
            <div style={{ marginBottom: '20px' }}>
              <AvailableAssetC timeStamp={timeStamp1} portfolio={portfolioCode} queryModel={'new'} />
            </div>
            <div style={{ marginBottom: '20px' }}>
              <TradeHoldC
                securityType={'1'} // 股票
                portfolio={portfolioCode}
                tradingcode={this.state.tradingCode}
                exchangecode={this.state.exchangecode}
                queryModel={'new'} // 区分是新接口还是老接口 只有簿记是新接口
                timeStamp={timeStamp2}
                onChange={(e) => {
                  this.setState(
                    {
                      position: { ...e },
                    },
                    () => {
                      this.stockBuySell.changeinvestmentType();
                    },
                  );
                }}
              />
            </div>

            <div style={{ marginTop: '10px' }}>
              <FirstHeaderC title='交易要素' />
            </div>

            <div className={style.bgcolor}>
              <InstructionSend
                type={this.props.type}
                rehandleSearch={this.props.rehandleSearch ? this.props.rehandleSearch : null}
                rehandleSearch2={this.props.rehandleSearch2 ? this.props.rehandleSearch2 : null}
                changeType={this.changeType}
                changeCode={this.changeCode}
                onChangePortfolioCode={this.onChangePortfolioCode}
                showTable={(query) => this.showTable(query)}
                investmentType={this.state.position.investmentType}
                onRef={(ref) => (this.stockBuySell = ref)}
                changeTimeStamp={(type) => {
                  this.setState({ [type]: new Date().getTime() });
                }}
              />
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
